<template>
  <div class="container-fluid">
    <div class="panel">
      <div class="panel-header" style="height: 30px">
        <p class="panel-title pull-left">调用次数统计</p>
        <el-button class="pull-right" icon="el-icon-refresh" @click="reloadCharts">刷新</el-button>
      </div>
      <div class="panel-body">
        <div ref="indexChart" id="indexChart" :style="{ width: '100%', height: '500px' }"></div>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "VisitTimesMonitor",
  data() {
    return {
      myChart: null
    }
  },
  mounted: function () {
    this.reloadCharts()
  },
  methods: {
    getMonitorData() {

      let total = []
      let success = []
      let failure = []
      for (let i = 0; i < 24; i++) {
        let totalNumber = Math.floor(Math.random() * 100000);
        total.push(totalNumber)

        let successNumber = Math.floor(Math.random() * totalNumber);
        success.push(successNumber)
        failure.push(totalNumber - successNumber)
      }

      return {
        title: ['总量', '成功', '失败'],
        total: total,
        success: success,
        failure: failure
      }
    },
    reloadCharts() {
      if (this.myChart === null) {
        this.myChart = echarts.init(document.getElementById("indexChart"));
      }

      let total = []
      let success = []
      let failure = []
      for (let i = 0; i < 24; i++) {
        let totalNumber = Math.floor(Math.random() * 100000);
        total.push(totalNumber)

        let successNumber = Math.floor(Math.random() * totalNumber);
        success.push(successNumber)
        failure.push(totalNumber - successNumber)
      }

      let option = {
        title: {
          text: '24 小时流量统计',
          subtext: '纯属虚构'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总量', '成功', '失败']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line']},
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '总量',
            type: 'line',
            data: total,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }, {
            name: '成功',
            type: 'line',
            data: success,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }, {
            name: '失败',
            type: 'line',
            data: failure,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }
        ]
      };

      // 绘制图表
      this.myChart.setOption(option, true)

    }
  }
}
</script>

<style scoped>

</style>
